<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/layout.css">
    <style>
        .container {
            width: 980px;
        }

        .body {
            width: 980px;
            height: 550px;
        }
        /* 左侧知识堂样式 */
        .body-left {
            width: 183px;
            height: 550px;
            float: left;
            background: url(images/customer.jpg);
            position: relative;
        }
        .left-img1 {
            width: 158px;
            height: 31px;
            background: url(images/reg.jpg);
            position: absolute;
            top: 175px;
            left: 12px;
        }
        .left-img2 {
            width: 158px;
            height: 31px;
            background: url(images/buy.jpg);
            position: absolute;
            top: 206px;
            left: 12px;
        }
        .left-img3 {
            width: 158px;
            height: 31px;
            background: url(images/sale.jpg);
            position: absolute;
            top: 237px;
            left: 12px;
        }
        .left-img4 {
            width: 158px;
            height: 31px;
            background: url(images/person.jpg);
            position: absolute;
            top: 268px;
            left: 12px;
        }
        /* 右侧 */
        .body-right {
            width: 780px;
            height: 550px;
            float: right;
            border: 1px solid #D98E95;
        }
        .right-header {
            width: 100%;
            height: 60px;
            
        }
        .header-text {
            font-size: 30px;
            font-weight: bold;
            margin-top: 28px;
            margin-left: 18px;
        }
        .right-hr {
            width: 740px;
            height: 8px;
            background: url(images/reg_line.jpg);
            margin-left:28px;
        }
        /* 中间文字 */
        .right-text {
            width: 740px;
            height: 55px;
            margin-left:28px;
            font-size: 20px;
            font-weight: bold;
        }
        .right-img {
            width: 495px;
            height: 47px;
            background: url(/images/reg_step.jpg);
            margin-left: 28px;
        }
        /* 底部 */
        .right-footer {
            width: 495px;
            height: 140px;
            margin-left: 28px;
            margin-top: 10px;
        }
        .footer-img {
            width: 13px;
            height: 13px;
            background: url(images/list_icon.gif);
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <iframe src="header.html" frameborder="0" width="980px"></iframe>
        </div>
        <div class="body">
            <div class="body-left">
                <div class="left-img1"></div>
                <div class="left-img2"></div>
                <div class="left-img3"></div>
                <div class="left-img4"></div>
            </div>
            <div class="body-right">
                <div class="right-header">
                    <div class="header-text"> 知识堂首页>>注册&认证</div>
                </div>
                <div class="right-hr"></div>
                <div class="right-text">
                    享受贵美网免费网上交易乐趣，并且在超人气的社区尽情交流您的网上购物经验，您需要先注册成为贵美的会员，具体的步骤如下
                </div>
                <div class="right-img"></div>
                <div class="right-footer">
                    <span class="footer-img"></span>
                    <span>如何激活会员名 ?</span><br>
                    <span class="footer-img"></span>
                    <span>如何注册贵美会员 ?</span><br>
                    <span class="footer-img"></span>
                    <span>注册时密码设置有什么要求 ？</span><br>
                    <span class="footer-img"></span>
                    <span>贵美认证</span><br>
                    <span class="footer-img"></span>
                    <span>为什么校验码明明是对的，却提示我输入错误 ？</span>
                </div>
            </div>
        </div>
        <div class="footer">
            <iframe src="footer.html" frameborder="0" width="980px"></iframe>
        </div>
    </div>

</body>

</html>